<template>
    <div class="view-body">
        <div class="head">
            <div>
                <template v-for="(v, i) in tabs">
                    <span :class="{active: currentTab === i}" :key="i" @click="changeTab(i, v.type)">{{v.name}}</span>
                </template>
            </div>
            <div>
                <span :class="{'active': type === 'latest'}" @click="selectSort('latest')">{{ $t("information_new") }}<i class="iconfont icon-paixu" style="font-size:14px"></i></span>
                <span :class="{'active': type === 'hottest'}" @click="selectSort('hottest')">{{ $t("knowledge_hot") }}<i class="iconfont icon-paixu" style="font-size:14px"></i></span>
            </div>
        </div>
        <div class="scroll-box">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getDataList"
                style="padding-bottom: 56px;"
                >
                    <knowledge-list-item :list="knowledgeList"></knowledge-list-item>
                    <!--暂无数据-->
                    <div v-if="!isLoading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t('no_data') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </van-list>
            </van-pull-refresh>
        <div  class="add-icon-box" @click="createKnow">
            <i class="add-icon"></i>
        </div>
        <div class="mask-layer" v-if="popupMask" @click="maskLayer()"></div>
        <div class="popup-box white-bg" v-if="popupLayerCreate">
            <ul class="pic-box-list clearfix">
                <li @click="picBoxLayer('ARTICLE')">
                    <span>
                        <i class="essay-icon"></i>
                    </span>
                    <p>{{ $t("ARTICLE") }}</p><!--文章-->
                </li>
                <li @click="picBoxLayer('FILES')">
                    <span>
                        <i class="doc-icon"></i>
                    </span>
                    <p>{{ $t("upload_files") }}</p><!--上传文档-->
                </li>
            </ul>
        </div>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import knowledgeListItem from './knowledgeListItem.vue';
export default {
    name: 'knowledge',
    data() {
        return {
            popupMask: false, // 创建知识弹层
            popupLayerCreate: false, // 创建知识弹层
            currentTab: 0,
            isLoading: false,
            kbiType: 'All', // 知识类型
            pageNo: 1, //分页页码
            type: 'latest', //最新最热
            selectClassify: '', //默认知识分类id
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            total: 0,
            knowledgeList: [],
            finished: false,
            isRefresh: false
        };
    },
    props: {
        mlId: {
            type: Number,
            default: 0
        }
    },
    components: {
        CommonLoading,
        knowledgeListItem
    },
    methods: {
        /**
         * 改变tab
         * */
        changeTab(index, type) {
            this.currentTab = index;
            this.kbiType = type;
            this.pageNo = 1;
            this.getDataList('refresh');
        },
        /**
         * 获取列表
         * */
        getDataList(option) { //列表请求方法
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/kb/item/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 10,
                    sortname: '',
                    sortorder: ''
                },
                data: {
                    kbiType: this.kbiType === 'All' ? null : this.kbiType,
                    catalogId: this.selectClassify === 'All' ? 0 : this.selectClassify,
                    type: this.type,
                    isMobile: true
                }
            }).then((res) => {
                if (res.data.results) {
                    if (option && option === 'refresh') {
                        this.knowledgeList = res.data.results;
                    } else {
                        this.knowledgeList = [...this.knowledgeList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowledgeList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        init() {
            //知识列表加载
            this.getDataList();
            // this.findKbCatalog();
        },
        /**
         * 最新最热
         * */
        selectSort(type) {
            this.knowledgeList = [];
            this.pageNo = 1;
            switch (type) {
            case 'latest':
                this.type = 'latest';
                break;
            case 'hottest':
                this.type = 'hottest';
                break;
            }
            this.getDataList();
        },
        /**
         * 下拉刷新
         * */
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        /**
         * @description: 创建知识
         * @param {*}
         * @return {*}
         */
        createKnow() {
            this.popupMask = true;
            this.popupLayerCreate = true;
        },
        maskLayer() {
            this.popupMask = false;
            this.popupLayerCreate = false;
        },
        picBoxLayer(type) {
            this.popupMask = false;
            this.popupLayerCreate = false;
            this.$router.push({path: '/addShare', query: {type}});
        }
    },
    mounted() {
        this.init();
    },
    computed: {
        tabs() {
            return [
                {type: 'All', name: this.$t('type_all_title')},
                {type: 'ARTICLE', name: this.$t('ARTICLE')},
                {type: 'DOCUMENT', name: this.$t('DOCUMENT')},
                {type: 'VEDIO', name: this.$t('VEDIO')},
                {type: 'AUDIO', name: this.$t('AUDIO')}
            ];
        }
    },
    watch: {
        mlId(nV) {
            //
            this.selectClassify = nV;
            this.pageNo = 1;
            this.getDataList('refresh');
        }
    }
};
</script>

<style scoped lang="less">
// 垂直居中
.vc{
    display: flex;
    align-items: center;
}
.head{
    background: #fff;
    // display: flex;
    // justify-content: space-between;
    span{
        padding: 9px;
        // font-size: 12px;
        color: #999;
        display: inline-block;
        &:active{
            background: #eee;
        }
    }
    .active{
        color: #075ebb;
    }
}
.scroll-box{
    height: calc(100% - 50px);
}
.scroll-box{
    /deep/.vue-scroll>div {
        height: 100%;
    }
}
.add-icon-box{
    position: fixed;
    bottom: 120px;
}
</style>
